<template>
  <!--相册--><br />
  <button @tap="openAlbum">相册</button>
  <image :src="imgPath" style="width: 20%; height: 20%"></image>
  <!-- <view>{{ textContent }}</view> -->
  <view>
    <!-- 假设有一个按钮，点击时会触发 popup 显示 -->
    <button @click="open" v-if="textContent">显示 Popup</button>
    <button @click="clickPlay" v-if="musicUrl">播放</button>

    <!-- 使用 ref 引用 popup 组件 -->
    <uni-popup ref="popup" type="center" :animation="true">
      {{ textContent }}
    </uni-popup>
  </view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive, getCurrentInstance, nextTick, onMounted } from "vue";
const { proxy } = getCurrentInstance();
console.log(proxy.Api);

// 使用 ref 创建对 popup 组件的引用
const popup = ref(null);
const isPlay = ref(true);
// 创建音频播放器
const innerAudioContext = uni.createInnerAudioContext();

const textContent = ref("");
const imgPath = ref("");
const musicUrl = ref("");

const openAlbum = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ["original", "compressed"],
    sourceType: ["album", "camera"],
    success: (res) => {
      const tempFilePaths = res.tempFilePaths;
      imgPath.value = tempFilePaths[0];
      uni.showLoading(); // 显示加载提示
      console.log(proxy.Api.domain + proxy.Api.Img2Text);
      uni.uploadFile({
        url: proxy.Api.domain + proxy.Api.StreamAuidoDataToSpeaker,
        name: "file",
        filePath: tempFilePaths[0],
        success: (res) => {
          // 上传成功后的处理，res.data 应该是服务器返回的JSON字符串
          const responseData = JSON.parse(res.data);
          // const resText = extractText(responseData);
          console.log(responseData);
          textContent.value = responseData.data.text;
          console.log("text:" + textContent.value);
          musicUrl.value = responseData.data.musicUrl;
          console.log("musicUrl:" + musicUrl.value);

          // 创建音频上下文
          const innerAudioContext = uni.createInnerAudioContext();
          // 设置音频的src
          innerAudioContext.src = musicUrl.value;
          console.log(innerAudioContext.src);
          // 播放音乐
          innerAudioContext.autoplay = true;
        },
        fail: (err) => {
          // 上传失败的处理
          console.error("Upload failed", err);
          uni.showToast({
            title: "上传失败",
            icon: "none",
          });
        },
        complete: () => {
          uni.hideLoading(); // 隐藏加载提示
        },
      });
    },
    fail: (err) => {
      // 选择图片失败的处理
      console.error("Choose image failed", err);
      uni.showToast({
        title: "选择图片失败",
        icon: "none",
      });
    },
  });
};

// 辅助函数，用于从服务器返回的JSON中提取text字段
function extractText(responseData) {
  // 假设responseData是JSON对象
  if (responseData && responseData.output && responseData.output.choices) {
    const choices = responseData.output.choices;
    for (let i = 0; i < choices.length; i++) {
      if (choices[i].finishReason === "stop" && choices[i].message) {
        const message = choices[i].message;
        if (message.content && message.content.length > 0) {
          return message.content[0].text;
        }
      }
    }
  }
  return "无法提取文本内容";
}
// // 组件挂载时自动播放音频
// onMounted(() => {
//   innerAudioContext.autoplay = false;
//   innerAudioContext.src = "";
//   onError(); // 监听错误
// });

// 点击播放/暂停按钮
const clickPlay = () => {
  if (isPlay.value) {
    onPause();
    console.log("播放");
  } else {
    onPlay();
    console.log("暂停");
  }
};

// 监听播放
const onPlay = () => {
  innerAudioContext.play();
  innerAudioContext.onPlay(() => {
    isPlay.value = true;
  });
};

// 监听暂停
const onPause = () => {
  innerAudioContext.pause();
  innerAudioContext.onPause(() => {
    isPlay.value = false;
  });
};

// 监听错误
const onError = () => {
  innerAudioContext.onError(() => {
    isPlay.value = false;
  });
};

// 弹出 popup 的方法
// 定义 open 方法，该方法将调用 popup 组件的 open 方法
const open = () => {
  if (popup.value) {
    popup.value.open("center"); // 假设 uni-popup 组件有 open 方法，并且可以接受参数
  }
};
</script>

<style lang="scss" scoped></style>
